שליטה ב-CSS: רישום מאפיינים מותאמים אישית עם @property

מאפיינים מותאמים אישית (הידועים גם כמשתני CSS) חוללו מהפכה בדרך שבה אנו כותבים ומתחזקים CSS. הם מאפשרים לנו להגדיר ערכים לשימוש חוזר, מה שהופך את גיליונות הסגנונות שלנו לגמישים ונוחים יותר לתחזוקה. אבל מה אם הייתם יכולים לעשות יותר מאשר רק להגדיר ערכים? מה אם הייתם יכולים להגדיר את סוג הערך שמאפיין מותאם אישית מכיל, יחד עם הערך ההתחלתי שלו והתנהגות הירושה שלו? כאן @property נכנס לתמונה.

מהו @property?

@property הוא כלל at-rule ב-CSS המאפשר לכם לרשום באופן מפורש מאפיין מותאם אישית בדפדפן. תהליך רישום זה מספק לדפדפן מידע על סוג המאפיין הצפוי, ערכו ההתחלתי, והאם הוא אמור לרשת מהאלמנט האב שלו. זה פותח מספר יכולות מתקדמות, כולל:

• בדיקת טיפוסים (Type checking): מוודא שהמאפיין המותאם אישית מקבל ערך מהסוג הנכון.
• אנימציה: מאפשר מעברים ואנימציות חלקות עבור מאפיינים מותאמים אישית מסוגים מסוימים, כמו מספרים או צבעים.
• ערכי ברירת מחדל: מספק ערך חלופי (fallback) אם המאפיין המותאם אישית אינו מוגדר במפורש.
• בקרת ירושה (Inheritance control): קובע אם המאפיין המותאם אישית יורש את ערכו מהאלמנט האב שלו.

חשבו על זה כהוספת בטיחות טיפוסים (type safety) למשתני ה-CSS שלכם. זה מאפשר לכם ליצור גיליונות סגנונות חזקים וצפויים יותר.

התחביר של @property

כלל ה-@property פועל לפי התחביר הבסיסי הבא:

@property --property-name {
  syntax: '';
  inherits: true | false;
  initial-value: ;
}

בואו נפרט כל חלק:

• --property-name: שם המאפיין המותאם אישית שברצונכם לרשום. הוא חייב להתחיל בשני מקפים (--).
• syntax: מגדיר את סוג הערך הצפוי עבור המאפיין. זה חיוני לבדיקת טיפוסים ואנימציה. נסקור את ערכי התחביר הזמינים בפירוט בהמשך.
• inherits: ערך בוליאני המציין אם המאפיין צריך לרשת מהאלמנט האב שלו. ערך ברירת המחדל הוא false אם לא צוין.
• initial-value: ערך ברירת המחדל עבור המאפיין אם הוא לא הוגדר במפורש על אלמנט. זה מבטיח שתמיד יהיה זמין ערך חלופי.

הבנת המתאר syntax

המתאר syntax הוא החלק החשוב ביותר בכלל @property. הוא אומר לדפדפן איזה סוג של ערך לצפות עבור המאפיין המותאם אישית. הנה כמה ערכי תחביר נפוצים:

• *: מאפשר כל ערך. זהו התחביר המתירני ביותר והוא למעשה משכפל את ההתנהגות של משתנה CSS סטנדרטי ללא רישום. השתמשו בו במשורה.
• <length>: מצפה לערך אורך (למשל, 10px, 2em, 50%). זה מאפשר אנימציות חלקות בין ערכי אורך שונים.
• <number>: מצפה לערך מספרי (למשל, 1, 3.14, -5). שימושי לאנימציה של מאפיינים מספריים כמו שקיפות או קנה מידה.
• <percentage>: מצפה לערך אחוז (למשל, 25%, 100%).
• <color>: מצפה לערך צבע (למשל, #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). מאפשר מעברי צבע ואנימציות חלקות.
• <image>: מצפה לערך תמונה (למשל, url(image.jpg), linear-gradient(...)).
• <integer>: מצפה לערך שלם (למשל, 1, -10, 0).
• <angle>: מצפה לערך זווית (למשל, 45deg, 0.5rad, 200grad). שימושי לאנימציה של סיבובים.
• <time>: מצפה לערך זמן (למשל, 1s, 500ms). שימושי לשליטה במשכי אנימציה או השהיות באמצעות מאפיינים מותאמים אישית.
• <resolution>: מצפה לערך רזולוציה (למשל, 300dpi, 96dpi).
• <transform-list>: מצפה לרשימת פונקציות טרנספורמציה (למשל, translateX(10px) rotate(45deg)). מאפשר אנימציה של טרנספורמציות מורכבות.
• <custom-ident>: מצפה למזהה מותאם אישית (מחרוזת). בדומה ל-enum.
• <string>: מצפה לערך מחרוזת (למשל, "Hello World"). היזהרו עם זה, מכיוון שאנימציה של מחרוזות בדרך כלל אינה נתמכת.
• תחבירים מותאמים אישית: ניתן ליצור תחבירים מורכבים יותר באמצעות שילובים של הנ"ל והאופרטורים | (או), `[]` (קיבוץ), `+` (אחד או יותר), `*` (אפס או יותר), ו-? (אפס או אחד). לדוגמה: <length> | <percentage> מאפשר ערך אורך או ערך אחוז.

בחירת ה-syntax הנכון חיונית למינוף מלוא העוצמה של @property.

דוגמאות מעשיות לשימוש ב-@property

בואו נסתכל על כמה דוגמאות מעשיות לאופן השימוש ב-@property ב-CSS שלכם.

דוגמה 1: אנימציה של צבע רקע

נניח שאתם רוצים ליצור אנימציה של צבע הרקע של כפתור. אתם יכולים להשתמש ב-@property כדי לרשום מאפיין מותאם אישית עבור צבע הרקע ולאחר מכן להנפיש אותו באמצעות מעברי CSS.

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Red */
}

בדוגמה זו, אנו רושמים את המאפיין המותאם אישית --bg-color עם התחביר <color>, כלומר הוא מצפה לערך צבע. ה-initial-value מוגדר ללבן (#fff). כאשר מעבירים את העכבר מעל הכפתור, --bg-color משתנה לאדום (#f00), והמעבר יוצר אנימציה חלקה של שינוי צבע הרקע.

דוגמה 2: שליטה ברדיוס הגבול באמצעות מספר

אתם יכולים להשתמש ב-@property כדי לשלוט ברדיוס הגבול של אלמנט ולהנפיש אותו.

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

כאן, אנו רושמים את --border-radius כ-<length>, מה שמבטיח שהוא יקבל ערכי אורך כמו px, em, או %. הערך ההתחלתי הוא 0px. כאשר מעבירים את העכבר מעל .rounded-box, רדיוס הגבול מונפש ל-20px.

דוגמה 3: אנימציה של היסט צל

נניח שאתם רוצים להנפיש את ההיסט האופקי של צל קופסה.

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

במקרה זה, --shadow-offset-x נרשם כ-<length>, וערכו ההתחלתי הוא 0px. המאפיין box-shadow משתמש במאפיין מותאם אישית זה עבור ההיסט האופקי שלו. במעבר עכבר, ההיסט מונפש ל-10px.

דוגמה 4: שימוש ב-<custom-ident> לעיצוב ערכות נושא (Theming)

התחביר <custom-ident> מאפשר לכם להגדיר קבוצה של ערכי מחרוזת מוגדרים מראש, ובעצם ליצור enum עבור משתני ה-CSS שלכם. זה שימושי עבור ערכות נושא או שליטה במצבים נפרדים.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* Default Theme */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

כאן, --theme נרשם עם התחביר <custom-ident>. אמנם איננו מפרטים במפורש את המזהים המותרים בכלל @property עצמו, הקוד מרמז שהם `light` ו-`dark`. לאחר מכן, ה-CSS משתמש בלוגיקה מותנית (var(--theme) == light ? ... : ...) כדי להחיל סגנונות שונים בהתבסס על ערכת הנושא הנוכחית. הוספת הקלאס `dark-theme` לאלמנט תחליף את ערכת הנושא לכהה. שימו לב שלוגיקה מותנית באמצעות `var()` אינה CSS סטנדרטי ולעיתים קרובות דורשת קדם-מעבדים (preprocessors) או JavaScript. גישה סטנדרטית יותר תשתמש בקלאסים של CSS ובתורשה (cascading):

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript to toggle the theme */
/* document.body.setAttribute('data-theme', 'dark'); */

בדוגמה מתוקנת זו, אנו משתמשים במאפיין data-theme על אלמנט ה-body כדי לשלוט בערכת הנושא. JavaScript (בהערה) ישמש להחלפת המאפיין בין `light` ל-`dark`. זוהי גישה חזקה וסטנדרטית יותר לעיצוב ערכות נושא עם משתני CSS.

היתרונות של שימוש ב-@property

שימוש ב-@property מציע מספר יתרונות:

• שיפור קריאות ותחזוקתיות הקוד: על ידי הגדרה מפורשת של סוג הערך הצפוי עבור מאפיין מותאם אישית, אתם הופכים את הקוד שלכם למובן יותר ופחות נוטה לשגיאות.
• יכולות אנימציה משופרות: @property מאפשר מעברים ואנימציות חלקות עבור מאפיינים מותאמים אישית, ופותח אפשרויות חדשות ליצירת ממשקי משתמש דינמיים ומרתקים.
• ביצועים טובים יותר: דפדפנים יכולים לבצע אופטימיזציה של רינדור אלמנטים המשתמשים במאפיינים מותאמים אישית רשומים, מה שמוביל לביצועים משופרים.
• בטיחות טיפוסים (Type Safety): הדפדפן מוודא שהערך שהוקצה תואם לתחביר המוצהר, מונע התנהגות בלתי צפויה ומקל על ניפוי שגיאות. זה שימושי במיוחד בפרויקטים גדולים שבהם מפתחים רבים תורמים לקוד.
• ערכי ברירת מחדל: הבטחה שלמאפיין מותאם אישית תמיד יהיה ערך חוקי, גם אם הוא לא הוגדר במפורש, מונעת שגיאות ומשפרת את חוסן ה-CSS שלכם.

תאימות דפדפנים

נכון לסוף 2023, ל-@property יש תמיכה טובה, אך לא אוניברסלית, בדפדפנים. הוא נתמך ברוב הדפדפנים המודרניים, כולל Chrome, Firefox, Safari ו-Edge. עם זאת, דפדפנים ישנים יותר עשויים שלא לתמוך בו. בדקו תמיד את מידע תאימות הדפדפנים העדכני ביותר באתרים כמו Can I use... לפני שימוש ב-@property בסביבת ייצור.

כדי להתמודד עם דפדפנים ישנים, ניתן להשתמש בשאילתות תכונה (@supports) כדי לספק סגנונות חלופיים:

@supports (--property: value) {
  /* Styles that use @property */
}

@supports not (--property: value) {
  /* Fallback styles for browsers that don't support @property */
}

החליפו את --property ו-value במאפיין מותאם אישית אמיתי ובערכו.

מתי להשתמש ב-@property

שקלו להשתמש ב-@property בתרחישים הבאים:

• כאשר אתם צריכים להנפיש מאפיינים מותאמים אישית: זהו מקרה השימוש העיקרי עבור @property. רישום המאפיין עם התחביר הנכון מאפשר אנימציות חלקות.
• כאשר אתם רוצים לאכוף בטיחות טיפוסים עבור מאפיינים מותאמים אישית: אם אתם רוצים להבטיח שמאפיין מותאם אישית יכיל תמיד ערך מסוג מסוים, השתמשו ב-@property כדי לרשום אותו.
• כאשר אתם רוצים לספק ערך ברירת מחדל עבור מאפיין מותאם אישית: המתאר initial-value מאפשר לכם לציין ערך חלופי.
• בפרויקטים גדולים: @property משפר את תחזוקתיות הקוד ומונע שגיאות, מה שהופך אותו למועיל במיוחד עבור פרויקטים גדולים עם מפתחים רבים.
• בעת יצירת רכיבים לשימוש חוזר או מערכות עיצוב: @property יכול לעזור להבטיח עקביות וצפויות ברחבי הרכיבים שלכם.

טעויות נפוצות שכדאי להימנע מהן

• שכחת המתאר syntax: ללא המתאר syntax, הדפדפן לא ידע את סוג הערך הצפוי, והאנימציות לא יעבדו כראוי.
• שימוש בערך syntax שגוי: בחירת תחביר שגוי עלולה להוביל להתנהגות בלתי צפויה. ודאו שאתם בוחרים את התחביר המשקף במדויק את סוג הערך הצפוי.
• אי-מתן initial-value: ללא ערך התחלתי, המאפיין המותאם אישית עלול להיות לא מוגדר, מה שיוביל לשגיאות. ספקו תמיד ערך ברירת מחדל הגיוני.
• שימוש יתר ב-* כתחביר: למרות שזה נוח, שימוש ב-* מבטל את היתרונות של בדיקת טיפוסים ואנימציה. השתמשו בו רק כאשר אתם באמת צריכים לאפשר כל סוג של ערך.
• התעלמות מתאימות דפדפנים: בדקו תמיד תאימות דפדפנים וספקו סגנונות חלופיים לדפדפנים ישנים יותר.

@property ו-CSS Houdini

@property הוא חלק ממערך גדול יותר של APIs הנקרא CSS Houdini. Houdini מאפשר למפתחים להתחבר למנוע הרינדור של הדפדפן, ומעניק להם שליטה חסרת תקדים על תהליך העיצוב והפריסה. ממשקי API אחרים של Houdini כוללים:

• Paint API: מאפשר להגדיר תמונות רקע וגבולות מותאמים אישית.
• Animation Worklet API: מספק דרך ליצור אנימציות בביצועים גבוהים הפועלות ישירות ב-compositor thread של הדפדפן.
• Layout API: מאפשר להגדיר אלגוריתמי פריסה מותאמים אישית.
• Parser API: מספק גישה למנתח ה-CSS של הדפדפן.

@property הוא API של Houdini פשוט יחסית ללמידה, אך הוא פותח את הדלת לחקירת תכונות מתקדמות יותר של Houdini.

סיכום

@property הוא כלל at-rule עוצמתי ב-CSS הפותח יכולות מתקדמות עבור מאפיינים מותאמים אישית. על ידי רישום מאפיינים מותאמים אישית בדפדפן, אתם יכולים לאכוף בטיחות טיפוסים, לאפשר אנימציות חלקות ולשפר את החוסן הכללי של קוד ה-CSS שלכם. למרות שתמיכת הדפדפנים אינה אוניברסלית, היתרונות של שימוש ב-@property, במיוחד בפרויקטים גדולים ובמערכות עיצוב, הופכים אותו לכלי רב ערך לפיתוח ווב מודרני. אמצו את @property וקחו את כישורי ה-CSS שלכם לשלב הבא!